<template>
  <div>
    <input type="file" @change="changeHandle"/>
    <vue-office-docx :src="src" @rendered="rendered" class="vue-office-docx"/>
  </div>
  <div>
    <codemirror
      v-model="code"
      placeholder="Code goes here..."
      :style="{ height: '400px' ,width:'500px', textAlign:'left'}"
      :autofocus="true"
      :indent-with-tab="true"
      :tab-size="2"
      :matchTags= "{ bothTags: 'true' }"
      :autoCloseTags= "true"
      @ready="handleReady"
      @change="changeEvent()"
      @focus="log('focus', $event)"
      @blur="changeEvent()"
      @update="changeEvent()"
    />
  </div>
</template>

<script>
import { ref, shallowRef } from 'vue'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import { Codemirror } from 'vue-codemirror'

export default {
  components: {
    VueOfficeDocx,
    Codemirror
  },
  // data(){
  //   return {
  //     src: ''
  //   }
  // },
  setup() {
      const code = ref('')
      const src = ref('')

      // Codemirror EditorView instance ref
      const view = shallowRef()
      const handleReady = (payload) => {
        view.value = payload.view
      }

      const changeHandle = (event) => {
        let file = event.target.files[0]
        let fileReader = new FileReader()
        fileReader.readAsArrayBuffer(file)
        fileReader.onload =  () => {
          src.value = fileReader.result
          const element = document.querySelector('.docx-wrapper');  
          if (element) {  
            console.log(element.innerHTML); // 打印初始内容  
          } 
        }
      }

      const rendered = () => {
        const element = document.querySelector('.docx-wrapper');  
        if (element) {  
          console.log(element.innerHTML); // 打印初始内容  
          // code.value = `${element.innerHTML}`
          code.value =`<div><span>12345678</span></div>`
        } 
      }

      const changeEvent = () => {
        const element = document.querySelector('.docx-wrapper');  
        if (element) {  
          console.log(element.innerHTML); // 打印初始内容  
          // code.value = `${element.innerHTML}`
          code.value =`<div><span>12345678</span></div>`
        } 
      }

      return {
        src,
        code,
        handleReady,
        log: console.log,
        rendered,
        changeHandle,
        changeEvent
      }
  },
  // methods:{
  //   changeHandle(event){
  //     this.src = ''
  //     let file = event.target.files[0]
  //     let fileReader = new FileReader()
  //     fileReader.readAsArrayBuffer(file)
  //     fileReader.onload =  () => {
  //       this.src = fileReader.result
  //       const element = document.querySelector('.docx-wrapper');  
  //       if (element) {  
  //         console.log(element.innerHTML); // 打印初始内容  
  //       } 
  //     }
  //   },
  //   rendered() {
  //     const element = document.querySelector('.docx-wrapper');  
  //     if (element) {  
  //       console.log(element.innerHTML); // 打印初始内容  
  //     } 
  //   }
  // }
}
</script>
<style scoped>
.vue-office-docx {
  width: 0;
  height: 0;
}
</style>